<template>
	<view class="wrap">
		<view class="no_record" v-if="!recordList.length">
			<view class="start_record_title">开始记录您的爱龟吧</view>
			<view class="start_record_box" @click="addTurtle">
				<image class="add_img" src="../../static/record/add.png" mode="" />
			</view>
		</view>
		<view class="record_list" v-else>
			<view class="record_item" v-for="item in recordList" :key="item._id" @click="toRecordList(item)">
				<!-- <view class="cut_img_box">
					<image class="cut_img" src="../../static/record/cut_gray.png" mode="" />
				</view> -->
				<image class="cut_img" src="../../static/record/cut_right.png" mode="aspectFit" v-if="showCut"/>
				<image class="record_img" :src="item.turtle_url?item.turtle_url:'../../static/avatar.png'" mode="aspectFill"/>
				<view class="record_name">
					{{item.turtle_name}}
				</view>
			</view>
		</view>
		<view class="suspension_box" v-if="recordList.length">
			<view class="record_item add_item" @click="addTurtle">
				<image class="add_img" src="../../static/record/add.png" mode="aspectFit"/>
			</view>
			<view class="record_item add_item" @click="cutTurtle">
				<image class="add_img" src="../../static/record/add_gray.png" mode="aspectFit"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				recordList: [],
				alreadyGet: false,
				showCut: false,
			}
		},
		
		methods: {
			toRecordList(item) {
				if(this.showCut) {
					const that = this;
					uni.showModal({
						title: `删除记录`,
						content:  `您确定删除${item.turtle_name}及所有记录吗`,
						showCancel: true,
						success: function (res) {
							if (res.confirm) {
								uniCloud.callFunction({
									name: 'removeOfTurtle',
									data: {
										_id: item._id,
									},
									success(res) {
										that.clearTheRecord(item);
										that.getListData();
										uni.showToast({
											duration: 2000,
											icon: "success",
											title: "删除成功",
										});
										that.showCut = false;
									},
									fail(e) {
										console.log(e);
									}
								})
							} else if (res.cancel) {
								that.showCut = false;
							}
						}
					});
				} else {
					uni.navigateTo({
						url: `/pages/recordPages/recordList?id=${item._id}`
					})
				}
			},
			clearTheRecord(item){
				uniCloud.callFunction({
					name: 'removeTheAllRecord',
					data: {
						_id: item._id,
					},
					success(res) {
						console.log('removeTheAllRecord-res',res)
					},
					fail(e) {
						console.log(e);
					}
				})
			},
			addTurtle(){
				uni.navigateTo({
					url: `/pages/recordPages/addTurtle`
				})
			},
			cutTurtle(){
				this.showCut = !this.showCut;
			},
			getListData(){
				const that = this;
				uniCloud.callFunction({
					name: 'getTurtleRecordList',
					data: {
						user_id: uni.getStorageSync('userId')
					},
					success(res) {
						const result = res.result;
						if(result.code = 200) {
							console.log(that.recordList, 'recordList')
							that.recordList = result.data.data;
							that.alreadyGet = true;
						}
					},
				})
			},
		},
		onShow() {
			this.getListData();
		}
	}
</script>

<style lang="scss" scoped>
.wrap{
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	.no_record {
		width: 100%;
		text-align: center;
		padding-top: 100rpx;
		.start_record_title {
			font-size: 36rpx;
		}
		.start_record_box {
			padding-top: 66rpx;
			.add_img {
				width: 180rpx;
				height: 180rpx;
            	animation: myBreath 2s linear infinite;  
			}

			@keyframes myBreath {
				0%{
					transform: scale(0.88);
				}
				50%{
					transform: scale(100%);
				}
				100%{
					transform: scale(0.88);
				}
			}
		}
	}

	.record_list,
	.suspension_box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 38rpx 0 38rpx 35rpx;
		box-sizing: border-box;
		.add_item {
			// width: 146rpx;
			padding-top: 30rpx;
			height: 146rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			/* #ifdef H5 */
			width: 140rpx;
			padding-top: 0;
			/* #endif */
			.add_img {
				width: 146rpx;
				height: 146rpx;
				border-radius: 0;
				/* #ifdef H5 */
				width: 100rpx;
				height: 100rpx;
				/* #endif */
			}
		}
		.record_item {
			width: 30%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-bottom: 35rpx;
			position: relative;
			// width: 186rpx;
			.record_img {
				flex-shrink: 0;
				width: 146rpx;
				height: 146rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
				background: #eee;
				border: 8rpx dashed #3d836d;
			}
			.record_name {
				font-size: 28rpx;
			}
			.cut_img {
				width: 16px;
				height: 16px;
				position: absolute;
				top: 0;
				right: 36rpx;
				z-index: 9;
			}
			.cut_img_box {
				width: 8px;
				height: 8px;
				display: flex;
				justify-content: center;
				align-content: center;
				position: absolute;
				top: 0;
				right: 36rpx;
				background: #3d836d;
				border-radius: 50%;
				z-index: 9;
			}
		}
	}
	.suspension_box {
		width: auto;
		position: fixed;
		bottom: 100rpx;
		right: 30rpx;
		display: flex;
		flex-direction: column;
		
		.add_item {
			padding-bottom: 0;
			.add_img {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}
}
</style>
